<template>
	<view class="container">
		<view class="fuel-info">
      <view>
        <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/station-default.png" />
      </view>
      <view>
        <view class="station_name">
          <text>{{stationInfo.stationName}}</text>
        </view>
        <view class="charge-time">
          <text>电桩编号 : {{nozExtInfo.connectorId}}</text>
        </view>
        <view class="road-posion">
          <view class="posion">
            <uni-icons type="location" color="#6A6A6A" size="18"></uni-icons>
          </view>
          <view class="road">
            {{stationInfo.address}}
          </view>
        </view>
      </view>
		</view>
    <view class="item active_item">
      <view class="current-line">
        <view class="current-item">
          <view class="title">时间段</view>
          <view class="time_solt_box sec-line">
            <view class="solt_state" v-if="currentTimeSlotObj.busyStatus === 1">
              <text>谷</text>
            </view>
            <view class="solt_state solt_flat" v-if="currentTimeSlotObj.busyStatus===2">
              <text>平</text>
            </view>
            <view class="solt_state solt_peak" v-if="currentTimeSlotObj.busyStatus===3">
              <text>峰</text>
            </view>
          </view>
          <view class="trd-line">{{currentTimeSlotObj.period}}</view>
        </view>
        <view class="type">
          <view class="title">类型</view>
          <view class="sec-line title">会员</view>
          <view class="sec-line title">非会员</view>
        </view>
        <view class="current-item">
          <view class="title">电价(元/度)</view>
          <view class="trd-line price_val">￥{{ (Number(currentTimeSlotObj.eleFeeVip) + Number(currentTimeSlotObj.serFeeVip)).toFixed(2) }}</view>
          <view class="trd-line">￥{{ (Number(currentTimeSlotObj.eleFee) + Number(currentTimeSlotObj.serFee)).toFixed(2) }}</view>
        </view>
        <view class="current-item">
          <view class="title">服务费(元/度)</view>
          <view class="trd-line price_val">￥{{currentTimeSlotObj.serFeeVip}}</view>
          <view class="trd-line">￥{{currentTimeSlotObj.serFee}}</view>
        </view>
      </view>
      <view class="price_item">
        <text>电费：{{currentTimeSlotObj.eleFee}}元/度</text><text>服务费：{{currentTimeSlotObj.serFee}}元/度</text>
      </view>
      <view class="active_text">
        <text>当前时段</text>
      </view>
    </view>


<!--		<view class="charge-electric active_item" style="padding-top: 80rpx;">-->
<!--			<view class="electric-title">-->
<!--				<view class="title">-->
<!--					费用说明-->
<!--				</view>-->
<!--				<view class="discount" @click="checkBillingRules">-->
<!--					计费详情 <uni-icons class="icon_right" type="forward" color="#939391" size="15"></uni-icons>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="current_price_info">-->
<!--				<view class="line_content">-->
<!--					<view class="text">-->
<!--						<text>电价</text>-->
<!--					</view>-->
<!--					<view class="time">-->
<!--						<text>{{currentTimeSlotObj.period}}</text>-->
<!--					</view>-->
<!--					<view class="price">-->
<!--						<view>-->
<!--							<text>非会员：</text> <text>￥{{currentTimeSlotObj.eleFee}}元/度</text>-->
<!--						</view>-->
<!--						<view>-->
<!--							<text>会员：</text> <text>￥{{currentTimeSlotObj.eleFeeVip}}元/度</text>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="line_content">-->
<!--					<view class="text">-->
<!--						<text>服务费</text>-->
<!--					</view>-->
<!--					<view class="time">-->
<!--						<text>{{currentTimeSlotObj.period}}</text>-->
<!--					</view>-->
<!--					<view class="price">-->
<!--						<view>-->
<!--							<text>非会员：</text> <text>￥{{currentTimeSlotObj.serFee}}元/度</text>-->
<!--						</view>-->
<!--						<view>-->
<!--							<text>会员：</text> <text>￥{{currentTimeSlotObj.serFeeVip}}元/度</text>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="active_text">-->
<!--				<text>当前时段</text>-->
<!--			</view>-->
<!--		</view>-->


		<!-- <view v-if="timeSlotCostData.length">
			<view class="charge-electric" v-for="(item, index) in timeSlotCostData" :key="index">
				<view class="current_price_info" v-if="!item.currentTimeSlotStatus">
					<view class="line_content">
						<view class="text">
							<text>电价</text>
						</view>
						<view class="time">
							<text>{{item.timeSlot}}</text>
						</view>
						<view class="price">
							<text>￥{{item.electricityPrice}}元/度</text>
						</view>
					</view>
					<view class="line_content">
						<view class="text">
							<text>服务费</text>
						</view>
						<view class="time">
							<text>{{item.timeSlot}}</text>
						</view>
						<view class="price">
							<text>￥{{item.serveicePrice}}元/度</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="submit">
			<view class="price">
				<view class="">
					<text class="count">会员: </text>
<!--					<text class="rmb">￥</text>-->
					<text class="val">{{currentTimeSlotPrice}}</text>
					<text class="unit">元/度</text>
				</view>
				<view class="notVip">
					<text class="count">非会员: </text>
<!--					<text class="rmb">￥</text>-->
					<text class="val">{{currentTimeSlotVipPrice}}</text>
					<text class="unit">元/度</text>
				</view>
			</view>
			<view class="scan-code"
				:class="{'disableColor': (nozExtInfo.connectorStatus != 2 && nozExtInfo.connectorStatus != 1 || authBtnStatus)}">
				<view class="scan" @click="chargeAuthFn()">
					<text>{{nozExtInfo.connectorStatus == 2 ? '立即充电' : connectorStatusMap[nozExtInfo.connectorStatus]}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="unlockPopup" background-color="none">
			<view class="unlock-popup-content2">
				<view class="header" @click="cancelCharge">
					<uni-icons type="closeempty" color="#939391" size="24"></uni-icons>
				</view>
				<view class="content_box">
					<view class="image">
						<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/charge_img.png" mode=""></image>
					</view>
					<view class="text">
						<text>是否开启充电</text>
					</view>
				</view>
				<view class="footer">
					<view class="cancel" @click="cancelCharge">
						<text>取消</text>
					</view>
					<!-- 预支付 -->
					<view class="confirm" @click="confirmStartCharge()">
						<text>确认</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 充电预支付弹窗 -->
		<uni-popup ref="prePayPopup" background-color="#fff" border-radius="24rpx 24rpx 0 0" :is-mask-click="false">
			<view class="popup-content">
				<view class="title">
					充电预支付
				</view>
				<view class="fixed-amt-list">
					<view class="amt-item" :class="{'current_item': currentFixedAmtIndex == index}"
						v-for="(item, index) in fixedAmtList" :key="index" @click='chooseAmt(item, index)'>
            <text class="price">{{item}}</text> <text>元</text>
					</view>
				</view>
        <view class="custom-panel">
          <view class="custom-price">
            <view class="title">其他金额</view>
            <input class="input-container" type="number" v-model="preAmt" placeholder="请输入金额" />
          </view>
        </view>
<!--        <view class="item-title">-->
<!--          <view class="input_amt_box">-->
<!--            <view class="pre_title">-->
<!--              <text>预付金额:</text>-->
<!--            </view>-->
<!--            <view class="pre_amount"><input type="number" v-model="preAmt" placeholder="请输入金额" /></view>-->
<!--          </view>-->
<!--        </view>-->
				<view class="item-title">
					选择支付方式
				</view>
				<view class="member_account">
					<view class="balance">
						<view class="balance-title">
              <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/balance-new.png" mode=""></image>
							<text>余额</text>
						</view>
						<view class="balance-list">
              <evan-radio-group v-model="currentPayMethodsIndex"  @change="radioPayWay">
                <view class="uni-list-cell item" v-for="(item, index) in memberPayInfo"  @click="onVipPayClick(item,index)">
                  <view class="item-name">{{ item.memberName }}:
                    <text
                        v-if="item.accAmt>=0">{{ item.accAmt }}元
                    </text>
                  </view>
                  <evan-radio
                      ref="listRadio"
                      :preventClick="true"
                      :icon="index === currentPayMethodsIndex ? 'circle-filled' : 'circle'"
                      :disabled="!item.accAmt || item.accAmt<=0"
                      icon-size="18"
                      primary-color="#006241"
                  >
                  </evan-radio>
                </view>
              </evan-radio-group>
<!--							<radio-group @change="radioPayWay">-->
<!--								<label class="uni-list-cell item" v-for="(item, index) in memberPayInfo"-->
<!--									:key="item.memberId">-->
<!--									<view class="item-name">{{item.memberName}}:{{item.accAmt}}元</view>-->
<!--									<radio :value="item.memberId" :checked="index === currentPayMethodsIndex"-->
<!--										:disabled="!item.accAmt || item.accAmt<=0" />-->
<!--								</label>-->
<!--							</radio-group>-->
						</view>

            <view class="wechat-pay">
              <radio-group @change="radioUnmemberPayWay" style="width: 100%;">
                <view class="uni-list-cell wechat-pay-title" v-for="(item, index) in unmemberPayInfo"
                      :key="item.id"
                      @click="onUnMemberPayClick(item,index)"
                >
                  <view style="display: flex;align-items: center;">
                    <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/we-chat-new.png" mode=""></image>
                    <text>{{ item.payName }}</text>
                  </view>
                  <evan-radio
                      ref="weChatPayRef"
                      :preventClick="true"
                      :icon="index === currentUnmemberPayIndex ? 'circle-filled' : 'circle'"
                      icon-size="18"
                      primary-color="#006241"
                  >
                  </evan-radio>
                </view>
              </radio-group>
            </view>
<!--						<view class="wechat-pay">-->
<!--							<radio-group @change="radioUnmemberPayWay" style="width: 100%;">-->
<!--								<label class="uni-list-cell wechat-pay-title" v-for="(item, index) in unmemberPayInfo"-->
<!--									:key="item.id">-->
<!--									<view style="display: flex;align-items: center;">-->
<!--                    <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/we-chat-new.png" mode=""></image>-->
<!--										<text>{{item.payName}}</text>-->
<!--									</view>-->
<!--									<radio :value="item.id" :checked="index === currentUnmemberPayIndex" />-->
<!--								</label>-->
<!--							</radio-group>-->
<!--						</view>-->
					</view>
					<view class="pay-submit" @click="confirmPay()">
						确认支付
					</view>
					<view class="cancel-pay-submit" @click="cancelPay()">
						取消支付
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 	<countDownTime ref="countDownTime" :percent="20" :size="200" :textFontSize= "28"  id='a'>
		</countDownTime> -->
	</view>
</template>

<script>
	import configs from '@/config/index'
	// import countDownTime from '@/components/count-down-time.vue'
  import evanRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue";
  import evanRadio from "@/components/evan-radio/evan-radio.vue";
	import {
		getGunOrStationInfo,
		getStationInfo,
		startCharge,
		chargeStatus,
		getOpenId,
		createMemberInfo,
		chargeAuth
	} from '@/api/index'
	import {
		feeSplitVal,
		checkAuditTime,
		toast
	} from '@/utils/common'
	import {
		miniPay
	} from '@/api/index.js'
	import {
		nextSnowflakeId
	} from '@/utils/snowflake.js'
	import weChatPay from '@/utils/charge-pre-pay.js'
	import gbProgress from '@/uni_modules/gb-progress/components/gb-progress/gb-progress.vue'
	export default {
		components: {
			gbProgress,
      evanRadioGroup, evanRadio
			// countDownTime
		},
		data() {
			return {
				process: 1,
				connectorId: '', // 枪号
				openId: '',
				timer: null,
				startCounts: 0, // 开始后的轮询次数
				nozExtInfo: {
					connectorName: ''
				}, // 枪信息
				stationInfo: {}, // 站信息
				timeSlotCostData: [], // 各时段电费服务费
				currentTimeSlotPrice: 0, // 当前时段价格
				currentTimeSlotVipPrice: 0, // 当前时段会员价格
				startChargeSeq: '',
				currentTimeSlotObj: {}, // 当前时段数据
				defaultMemberInfo: {}, // 默认的会员信息
				memberPayInfo: [], // 会员支付方式的支付及会员信息列表
				currentPayMethodsIndex: null, // 会员支付方式下标
				unmemberPayInfo: [{
						payName: '微信支付',
						id: '3'
					}
					// {
					// 	payName: '支付宝',
					// 	id: '4'
					// }
				],
				currentUnmemberPayIndex: 0, // 非会员支付方式下标
				payType: '3', // 2-会员支付
				fixedAmtList: [20, 30, 50, 80, 100, 150],
				preAmt: '', // 预付金额
				currentFixedAmtIndex: -1, // 固定金额下标
				innerTradeNo: '',
				connectorStatusMap: {
					'1': '空闲',
					'2': '占用', // 未充电
					'3': '已插枪', // 充电中
					'4': '被预约', // 被预约
					'255': '故障'
				},
				timeSlotCostData: [],
				authBtnStatus: false
			};
		},
		onLoad(option) {
			console.log('onLoad')
			console.log(option)
			this.connectorId = option.connectorId
			this.getStationDetailsFn(option.stationId)
			this.getChargeGunStationInfo()
			this.authBtnStatus = false

		},
		onShow() {
			// this.getChargeGunStationInfo()
			this.openId = uni.getStorageSync('userOpenId')
			if (!this.openId) {
				const self = this
				uni.login({
					provider: 'weixin', // 使用微信登录
					success: function(loginRes) {
						self.getOpenIdFn(loginRes.code)
					}
				})
			} else {
				this.getPayInfo()
			}
		},
		methods: {
			// 充电授权
			chargeAuthFn() {
				if (this.nozExtInfo.connectorStatus == 2) {
					chargeAuth({
						connectorId: this.connectorId
					}).then(res => {
						if (res) {
							this.authBtnStatus = true
							this.startChargeSeq = res.startChargeSeq
							// this.startChargeFn()
							this.prePayToggle()
						} else {
							toast('授权失败请重新授权')
						}
					})
				} else if (this.nozExtInfo.connectorStatus === 1) {
					const _that = this
					uni.showModal({
						title: '提示',
						content: '请将充电枪的插头插入车辆充电孔',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								// _that.getChargeGunStationInfo()
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				} else if (this.nozExtInfo.connectorStatus === 3) {
					if (this.nozExtInfo.openid == this.openId) {
						uni.navigateTo({
							url: '/pages/panda-charge/close-charge/index?connectorId=' + this.connectorId +
								'&startChargeSeq=' + this.nozExtInfo.startChargeSeq
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '当前油枪他人正在充电',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定')
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							}
						})
					}
				} else {
					toast('该枪状态不可授权')
				}
			},
			// 预支付弹窗
			prePayToggle() {
				if (this.nozExtInfo.connectorStatus == 2) {
					this.$refs.prePayPopup.open('bottom')
				}
			},
			// 解锁弹窗
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.unlockPopup.open(type)
			},
			// 获取openid
			getOpenIdFn(code) {
				// const config = configs.wxConfig
				// uni.request({
				// 	url: config.wxSnsUrl, // 请求微信服务器
				// 	method: 'GET',
				// 	data: {
				// 		appid: config.appid, //你的小程序的APPID
				// 		secret: config.secret, //你的小程序秘钥secret,  
				// 		js_code: code, //wx.login 登录成功后的code
				// 		grant_type: 'authorization_code'
				// 	},
				// 	success: (res) => {
				// 		console.log('获取信息openId', res); // 换取成功后 暂存这些数据 留作后续操作
				// 		const openid = res.data.openid //openid 用户唯一标识
				// 		this.openId = openid
				// 		uni.setStorageSync('userOpenId', openid)
				// 	}
				// });
				getOpenId({
					code: code,
				}).then(res => {
					console.log(res, 'getOpenIdFngetOpenIdFn')
					if (res) {
						console.log('获取信息openId', res); // 换取成功后 暂存这些数据 留作后续操作
						const openid = res.openid //openid 用户唯一标识
						this.openId = openid
						uni.setStorageSync('userOpenId', openid)
						this.getPayInfo()
					}
					// uni.setStorageSync('memberInfo', JSON.stringify(res))
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取会员信息里面支付信息
			getPayInfo() {
				createMemberInfo({
					openId: this.openId,
				}).then(res => {
					console.log(res, 'createMemberInfo')
					if (res && res.memberAccListVos) {
						this.memberPayInfo = res.memberAccListVos
						this.defaultMemberInfo = res.memberVo
					} else {
						console.log(res, '错误信息')
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取站点详情
			getStationDetailsFn(stationId) {
				getStationInfo({
					stationId: stationId
				}).then(res => {
					console.log(res, 'stationInfo')
					if (res) {
						const stationDetails = res
						this.timeSlotCostData = stationDetails.periodPriceList
						if (this.timeSlotCostData.length) {
							for (let i = 0; i < this.timeSlotCostData.length; i++) {
								this.timeSlotCostData[i].currentTimeSlotStatus = false
								if (checkAuditTime(this.timeSlotCostData[i].period.split('~')[0], this
										.timeSlotCostData[i].period.split('~')[1])) {
									this.timeSlotCostData[i].currentTimeSlotStatus = true
									this.currentTimeSlotPrice = (Number(this.timeSlotCostData[i].eleFee) + Number(
										this.timeSlotCostData[i].serFee)).toFixed(2)
									this.currentTimeSlotVipPrice = (Number(this.timeSlotCostData[i].eleFeeVip) +
										Number(this.timeSlotCostData[i].serFeeVip)).toFixed(2)
									this.currentTimeSlotObj = this.timeSlotCostData[i]
								}
							}
							console.log(this.timeSlotCostData, 'this.timeSlotCostData')
						}
					} else {
						console.log(res, 'error')
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取电枪+站点信息
			getChargeGunStationInfo() {
				console.log(this.connectorId, 'this.connectorIdthis.connectorId')
				getGunOrStationInfo({
					connectorId: this.connectorId, // 充电接口ID
				}).then(res => {
					console.log(res, 'getGunOrStationInfo')
					this.nozExtInfo = res.nozExt
					this.stationInfo = res.station
					if (this.stationInfo.workStatus == 0) {
						uni.showModal({
							title: '提示',
							content: this.stationInfo.tip,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/panda-charge/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							}
						})
						return
					}
                    if(this.stationInfo.workStatus){
                        		uni.showModal({
								title: '提示',
								content: this.stationInfo.tip,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
                    }
					if (this.nozExtInfo.connectorStatus == 3) { // 充电中
						const userOpenId = uni.getStorageSync('userOpenId')
						if (this.nozExtInfo.openid == userOpenId) {
							uni.navigateTo({
								url: '/pages/panda-charge/close-charge/index?connectorId=' + this
									.connectorId + '&startChargeSeq=' + this.nozExtInfo.startChargeSeq
							})
						} else {
							uni.showModal({
								title: '提示',
								content: '当前油枪他人正在充电',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						}
					} else {
						this.chargeAuthFn()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 开始充电
			startChargeFn() {
				this.toggle('center')
			},
			// 取消开始充电弹窗
			cancelCharge() {
				this.$refs.unlockPopup.close()
			},
			// startCharge(){
			// 	this.$refs.unlockPopup.close()
			// 	this.$refs.countDownTime.showLoad()
			// },
			// 确认开始充电
			confirmStartCharge(e) {
				this.$refs.unlockPopup.close()
				let memberInfo = JSON.parse(uni.getStorageSync('memberInfo'))
				// this.$refs.countDownTime.showLoad()
				// uni.showLoading({
				// 	title: '正在启动...'
				// });
				startCharge({
					openid: this.openId, // 用户Openid
					connectorId: this.connectorId, // 充电接口ID
					startChargeSeq: this.startChargeSeq,
					// memberId: memberInfo.memberVo.member.memberId,
					memberId: this.memberPayInfo[this.currentPayMethodsIndex].memberId,
					// accMemberId: memberInfo.memberVo.member.accMemberId,
					accMemberId: this.memberPayInfo[this.currentPayMethodsIndex].accMemberId,
					maxAmt: this.preAmt,
					paidTypeId: this.payType,
					innerTradeNo: this.innerTradeNo
				}).then(res => {
					console.log(res, 'startCharge')
					if (res) {
						// this.$refs.countDownTime.hideLoad()
						uni.navigateTo({
							url: '/pages/panda-charge/close-charge/index?connectorId=' + this.connectorId +
								'&startChargeSeq=' + res
						})
						// this.startCounts = 0
						// this.checkChargeStatus(res, 0)
					}
				}).catch(error => {
					console.log(error)
					// this.$refs.countDownTime.hideLoad()
				})
			},
      onVipPayClick(item, index) {
        if (item.accAmt < 0){
          this.$refs.listRadio[index].select()
          this.currentPayMethodsIndex = index
          this.currentUnmemberPayIndex = null
          this.payType = 2
        }
      },
			// 选择会员支付方式
			radioPayWay: function(evt) {
				console.log(evt, '选择会员支付方式')
				this.payType = 2
				for (let i = 0; i < this.memberPayInfo.length; i++) {
					if (this.memberPayInfo[i].memberId == evt.detail.value) {
						this.currentPayMethodsIndex = i;
						this.currentUnmemberPayIndex = null
						// this.getOrderDiscountInfo()
						return;
					}
				}
			},
      onUnMemberPayClick(item, index) {
        this.$refs.weChatPayRef[index].select()
        this.currentPayMethodsIndex = null
        this.currentUnmemberPayIndex = index
      },
			// 选择非会员支付方式（微信支付）
			radioUnmemberPayWay: function(evt) {
				console.log(evt, '微信支付')
				this.payType = 3
				for (let i = 0; i < this.unmemberPayInfo.length; i++) {
					if (this.unmemberPayInfo[i].id == evt.detail.value) {
						this.currentUnmemberPayIndex = i;
						this.currentPayMethodsIndex = null
						return;
					}
				}
			},

			// 选择固定金额
			chooseAmt(val, index) {
				console.log(val)
				this.preAmt = val
				this.currentFixedAmtIndex = index
			},
			// 确认支付预支付充电金额
			confirmPay() {
				if (!this.preAmt) {
					toast('请输入金额')
					return
				}
				const _this = this
				if (_this.payType != 2) {
					let data = {
						stationId: _this.stationInfo.stationId,
						tradeType: 'CHARGE_ORDER',
						sourceOrderId: this.startChargeSeq,
						payAmt: _this.preAmt,
						connectorId: _this.connectorId,
						paidTypeId: 3,
						paidTypeName: '微信',
					}
					weChatPay(data).then(res => {
						if (res && res.code == 200) {
							// 预支付成功
							console.log(res, '预支付成功')
							_this.innerTradeNo = res.innerTradeNo
							_this.$refs.prePayPopup.close()
							_this.startChargeFn() // 开始充电
						} else {
							uni.reLaunch({
								url: '../index'
							})
							_this.authBtnStatus = false
						}
					})
				} else {
					let data = {
						reqId: nextSnowflakeId(),
						stationId: _this.stationInfo.stationId,
						openid: uni.getStorageSync('userOpenId'),
						tradeType: 'CHARGE_ORDER',
						sourceOrderId: _this.startChargeSeq,
						payAmt: _this.preAmt,
						connectorId: _this.connectorId,
						paidTypeId: 2,
						paidTypeName: '账户余额',
						accMemberId: _this.memberPayInfo[this.currentPayMethodsIndex].accMemberId,
						memberId: _this.memberPayInfo[this.currentPayMethodsIndex].memberId,
					}
					miniPay(data).then(res => {
						if (res.sourceOrderId) {
							// 预支付成功
							console.log(res, '预支付成功')
							_this.innerTradeNo = res.innerTradeNo
							_this.$refs.prePayPopup.close()
							_this.startChargeFn() // 开始充电
						} else {
							uni.reLaunch({
								url: '../index'
							})
							_this.authBtnStatus = false
						}
					})
					// _this.authBtnStatus = false
					// _this.$refs.prePayPopup.close()
				}
			},
			// 取消支付关闭预支付弹出
			cancelPay() {
				this.$refs.prePayPopup.close()
				uni.navigateBack() // 返回上一页
				this.authBtnStatus = false
			},
			// 查询充电状态
			checkChargeStatus(code, time) {
				const self = this
				self.timer = setTimeout(() => {
					chargeStatus({
						connectorId: self.connectorId, // 充电接口ID
						startChargeSeq: code, // 充电请求订单号
					}).then(res => {
						console.log(res, 'checkChargeStatus')
						const startChargeSeqStatus = res.startChargeSeqStatus
						// 这里面做状态判断是否继续查询
						self.startCounts += 1 // 累计次数
						self.process += 1
						if (startChargeSeqStatus === 2) {
							uni.hideLoading()
							clearTimeout(self.timer)
							uni.navigateTo({
								url: '../close-charge/index?startChargeSeq=' + code +
									'&connectorId=' + self.connectorId
							})
						} else if (startChargeSeqStatus === 0 || startChargeSeqStatus === 1) {
							if (self.startCounts >= 24) {
								clearTimeout(self.timer)
								uni.hideLoading()
								uni.showModal({
									title: '提示',
									content: '启动超时请联系管理员',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定')
										} else if (res.cancel) {
											console.log('用户点击取消')
										}
									}
								})
							} else {
								self.checkChargeStatus(code, 5000)
							}
						} else {
							console.log(res.startChargeSeqStatus, '0:初始 1：启动中2：充电中3：停止中4：已结束5：失败')
							clearTimeout(self.timer)
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content: '启动异常状态：' + startChargeSeqStatus,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						}
					}).catch(error => {
						console.log(error)
						uni.hideLoading()
					})
				}, time)
			},
			// 查看计费详情
			checkBillingRules() {
				uni.navigateTo({
					url: '../billing-rules/index?stationId=' + this.stationInfo.stationId
				})
			}
		},
		destroyed() {
			// 离开页面销毁定时器
			clearTimeout(this.timer)
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx 28rpx 140rpx 28rpx;

		.fuel-info {
			background-color: #ffffff;
			padding: 24rpx;
			border-radius: 24rpx;
      display: flex;
      justify-content: flex-start;
      image{
        width: 112upx;
        height: 112upx;
        border-radius: 16upx;
        margin-right: 16upx;
      }

			.station-distance {
				display: flex;

				.charge_gun_status {
					width: 35%;

					.status {
						margin: auto;
						width: 100rpx;
						height: 100rpx;
						line-height: 100rpx;
						border-radius: 50%;
						border: 8rpx solid #b8e7ef;
						text-align: center;

						text {
							font-size: 26rpx;
							//color: #b8e7ef;
							font-weight: 600;
						}
					}

					.Insert_gun_time {
						text-align: center;

						text {
							display: inline-block;
							padding: 4rpx;
							border: 1rpx solid #f4f4f4;
							color: #a9b2b1;
							border-radius: 10rpx;
							font-size: 20rpx;
						}
					}
				}

				.charge_gun_info {

					// padding-left: 10%;
					.electricity {
						color: #2b2b2b;
						font-size: 36rpx;

						.gun_num {
							font-weight: bolder;
						}

						.speed {
							display: inline-block;
							vertical-align: middle;
							width: 40rpx;
							height: 40rpx;
							line-height: 40rpx;
							background-color: #ee032c;
							color: #ffffff;
							font-size: 20rpx;
							border-radius: 10rpx;
							text-align: center;
						}
					}

					.end_num {
						color: #2b2b2b;
						font-size: 30rpx;

						text {
							font-weight: bolder;
						}
					}

					.station_address {
						font-size: 28rpx;
						color: #7f7f7f;
					}

					.voltage {
						text {
							display: inline-block;
							padding: 4rpx;
							border: 1rpx solid #f4f4f4;
							color: #7f7f7f;
							border-radius: 10rpx;
							font-size: 20rpx;
						}
					}
				}
			}

			.station_name {
				font-weight: 500;
				color: #2D2B2A;
				font-size: 34rpx;
			}

			.charge-time {
				margin-top: 16rpx;

				text {
					display: inline-block;
          //margin: 0 16upx;
					//padding: 2rpx 8rpx;
					//background: rgba(71, 139, 255, 0.09);
					border-radius: 4rpx;
					font-weight: 400;
					//color: #478BFF;
					font-size: 28rpx;
				}
			}

			.road-posion {
				padding-top: 16rpx;
				display: flex;
				align-items: center;

				// justify-content: space-between;
				.posion {
					font-size: 24rpx;
					padding-right: 8rpx;
				}

				.road {
					font-size: 26rpx;
					font-weight: 400;
					color: #6A6A6A;
				}
			}

			.notice {
				background-color: #f8f8f8;
				display: flex;
				align-items: center;
				height: 70rpx;
				border-radius: 10rpx;
				align-items: center;
				padding: 0px 20rpx;
				margin: 20rpx 0px 20rpx 0rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.indulgence {
				width: 125rpx;
				background-color: #e1ffbe;
				color: #6ddc6b;
				font-size: 24rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.charge-electric {
			margin-top: 24rpx;
			padding: 0 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;

			.electric-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: 500;
					color: #2d2b2a;
					font-size: 32rpx;
				}

				.discount {
					font-size: 26rpx;
					font-weight: 400;
					color: #939391;

					.icon_right {
						vertical-align: middle;
					}
				}
			}

			.price_title {
				color: #323232;
				font-size: 36rpx;
				font-weight: bolder;
			}

			.electric-list {
				margin-top: 30rpx;

				.current_time_slot {
					border: 1px solid #ffaa00;
				}

				.electric-item {
					background-color: #f0f0f0;
					color: #3e3e3e;
					font-size: 24rpx;
					display: flex;
					padding: 10rpx 20rpx;
					margin-top: 20rpx;

					.time {
						width: 30%;
					}

					.electricity-price {
						width: 40%;
					}

					.price {
						width: 30%;
					}
				}
			}

			.current_price_info {

				// padding: 0 32rpx;
				.line_content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 0 24rpx 0;
					border-bottom: 2rpx solid #F3F5F7;
					font-size: 28rpx;

					.text {
						font-weight: 400;
						color: #666260;
					}

					.time {
						font-weight: 400;
						color: #2D2B2A;
						text-align: center;
					}

					.price {
						font-weight: 400;
						color: #2D2B2A;
						text-align: right;
					}

				}
			}
		}

    .item{
      position: relative;
      margin-top: 24rpx;
      padding: 24rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      .current-line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .current-item{
          width: 150upx;
        }
        .title{
          font-size: 24upx;
          color: #6A6A6A;
          line-height: 36upx;
        }
        .type{
          width: 80upx;
        }
      }

      .sec-line{
        height: 44upx;
        line-height: 44upx;
        margin-top: 24upx;
      }

      .trd-line{
        font-weight: 500;
        height: 44upx;
        line-height: 44upx;
        margin-top: 24upx;
        font-size: 28upx;
        color: #1B1B1B;
      }
      .price_val{
        color: #E56646;
      }

      .time_solt_box{
        display: flex;
        align-items: center;
        .solt_state{
          width: 44rpx;
          height: 44rpx;
          line-height: 44rpx;
          background: linear-gradient(138.72deg, #66E078 3.34%, #2FBC44 91.2%);
          border-radius: 12upx;
          font-weight: 600;
          color: #FFFFFF;
          font-size: 24rpx;
          text-align: center;
        }
        .solt_flat{
          background: linear-gradient(138.72deg, #76C8FD 3.34%, #53B2EE 91.2%);
        }
        .solt_peak{
          background: linear-gradient(138.72deg, #F57546 3.34%, #FFAB66 91.2%);
        }
        .time_solt{
          padding-left: 16rpx;
          font-weight: 500;
          color: #2D2B2A;
          font-size: 32rpx;
        }
      }
      .total_price{
        display: flex;
        padding-top: 16rpx;
        .member{
          padding-left: 10rpx;
        }
        .title{
          font-size: 26rpx;
          color: #333333;
        }
        .rmb{
          font-weight: 500;
          font-size: 26rpx;
          color: #E56646;
        }
        .price_val{
          font-weight: 500;
          color: #E56646;
          font-size: 38rpx;
        }
        .unit{
          font-weight: 400;
          color: #2D2B2A;
          font-size: 26rpx;
        }
      }
      .price_item{
        margin-top: 20upx;
        border-top: 1upx solid #F0F1F2;
        padding-top: 10rpx;
        text{
          display: inline-block;
          padding: 2rpx 8rpx;
          margin-right: 16rpx;
          //font-weight: 400;
          color: #9D9D9D;
          font-size: 24rpx;
          //background: #F3F5F7;
          border-radius: 4rpx;
        }
      }
      .active_text{
        display: none;
      }
    }
    .active_item{
      position: relative;
      border: 2rpx solid #C2A661;
      box-sizing: border-box;
      overflow: hidden;
      padding-top: 62upx;
      .active_text{
        width: 154upx;
        height: 64upx;
        line-height: 50upx;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url("http://wx.xiongmaovip.com/miniapp/static/chargeFuel/current-time.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        //background: linear-gradient(to right, #47C2FF, 50%, #478BFF);
        //border-radius: 0 16rpx 0 16rpx;
        //padding: 8rpx 16rpx;
        text{
          font-weight: 500;
          color: #FFFFFF;
          font-size: 24rpx;
          text-align: center;
        }
      }
    }

		.submit {
			width: 100%;
			left: 0;
			right: 0;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			border-top: 1rpx #efefef solid;
			justify-content: space-between;
			height: 120rpx;
			// border-top-left-radius: 24rpx;
			// border-top-right-radius: 24rpx;



			.price {
				margin-left: 30rpx;
				// flex: 1;
				text-align: right;
				padding-right: 24rpx;

        .notVip{
          .val,.unit,.rmb{
            color: #6A6A6A;
          }
          .val{
            font-size: 28upx;
          }
        }

				.count {
					font-weight: 400;
					color: #2D2B2A;
					font-size: 26rpx;
				}

				.rmb {
					font-weight: 500;
					color: #006241;
					font-size: 26rpx;
				}

				.val {
					font-weight: 500;
					color: #006241;
					font-size: 38rpx;
				}

				.unit {
					font-weight: 400;
					color: #006241;
					font-size: 26rpx;
				}
			}

			.scan-code {
				display: flex;
				align-items: center;
				background: #006241;
				margin-right: 30rpx;
				//padding: 15rpx 0rpx;
				border-radius: 60rpx;
        width: 200upx;
        height: 80upx;
        line-height: 80upx;
        text-align: center;

				.scan {
					//font-weight: 500;
          margin: auto;
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}

			.disableColor {
				background: #eeeeee;
			}
		}
	}

	.unlock-popup-content {
    box-sizing: border-box;
		width: 500rpx;
		padding: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;

		.progress_content {
			display: flex;
			justify-content: center;

			.second {
				color: #ffffff;
				font-size: 28rpx;
				font-weight: bolder;
			}
		}

		.unlock_tips {
			padding-top: 10rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.unlock-popup-content2 {
		width: 500rpx;
		padding: 40rpx;
		border-radius: 16rpx;
		background-color: #ffffff;

		.header {
			text-align: right;
		}

		.content_box {
			.image {
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.text {
				padding-top: 20rpx;
				font-weight: 500;
				color: #2D2B2A;
				font-size: 36rpx;
				text-align: center;
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			text-align: center;
			padding-top: 60rpx;

			.cancel {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #F3F5F7;
				border-radius: 180rpx;
				margin-right: 160rpx;
				font-weight: 500;
				color: #2D2B2A;
			}

			.confirm {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #F3F5F7;
				border-radius: 180rpx;
				font-weight: 500;
				color: #478BFF;
			}
		}
	}

	.popup-content {
		background: #FFFFFF;
		border-radius: 24upx 24upx 0 0;

		.title {
			padding: 32rpx 30rpx;
			text-align: left;
			font-size: 32rpx;
			font-weight: 500;
			color: #1B1B1B;
			line-height: 44rpx;
		}

		.br {
			width: 100%;
			height: 2rpx;
			background: #F3F5F7;
			// margin: 32rpx 0rpx 40rpx 0rpx;
		}

		.item-title {
			padding: 0 40rpx;
			font-size: 28rpx;
			color: #1B1B1B;
			line-height: 40rpx;
			margin: 40rpx 0 20rpx;
      font-weight: 500;

			.input_amt_box {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #eeeeee;

				.pre_title {
					padding-right: 10rpx;
				}

				.pre_amount {
					flex: 1;

					input {
						font-size: 40rpx;
						font-weight: bolder;
					}
				}
			}
		}

		.fixed-amt-list {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.amt-item {
				width: 30%;
				margin-bottom: 20rpx;
				line-height: 84rpx;
				text-align: center;
				background: #F8F8F9;
				border-radius: 12upx;
				font-size: 28rpx;
				color: #6A6A6A;
        border: 1upx solid white;
        .price{
          font-weight: 500;
          font-size: 36upx;
          color: #1B1B1B;
          margin-right: 8upx;
        }
			}

			.current_item {
				background: #0062410F;
				color: #006241;
        border: 1upx solid #006241;
        .price{
          color: #006241;
        }
			}
		}

    .custom-panel{
      padding: 0 40upx;
      .custom-price{
        border-radius: 12upx;
        background: #F8F8F9;
        //padding: 32upx 24upx;
        font-size: 28upx;
        color: #1B1B1B;
        line-height: 108upx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .title{
          margin-right: 16upx;
        }
        .input-container{

        }
      }
    }

		.member_account {
      margin-top: 24upx;
			padding: 0 30rpx;

			.balance {
				//padding-left: 32rpx;

				.pay_type {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					.member_pay,
					.unmember_pay {
						margin-right: 20rpx;
						color: black;
						font-size: 24rpx;
						font-weight: 600;
						text-align: center;
						background-color: #f3f3f3;
						border-radius: 16rpx;
						width: 33.3333%;
						line-height: 60rpx;
					}

					.active_pay {
						background-color: #ffaa00;
						color: #ffffff;
					}
				}

				.balance-title {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-size: 28rpx;
						//font-weight: 500;
						color: #2D2B2A;
						line-height: 40rpx;
						margin-left: 18rpx;
					}
				}

        .balance-list {
          padding-left: 64rpx;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16rpx;
            padding: 0;

            .item-name {
              font-size: 28rpx;
              color: #2D2B2A;
              line-height: 40rpx;
              width: 100%;
              display: flex;
              justify-content: space-between;

              text {
                display: inline-block;
                width: 60%;
                text-align: left;
                // display: inline-block;
                // width: 300rpx;
              }
            }
          }

          .item:nth-child(1) {
            margin-top: 28rpx;
          }

          .br {
            //height: 2rpx;
            background: #F3F5F7;
          }
        }

        .wechat-pay {
          display: flex;
          align-items: center;
          justify-content: space-between;
          //padding-right: 20rpx;

          .wechat-pay-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            image {
              width: 48rpx;
              height: 48rpx;
            }

            text {
              font-size: 28rpx;
              //font-weight: 500;
              color: #2D2B2A;
              line-height: 40rpx;
              margin-left: 18rpx;
            }
          }
        }
			}

			.pay-submit {
				margin-top: 72rpx;
				margin-bottom: 24rpx;
				line-height: 96rpx;
				background: #006241;
				text-align: center;
				border-radius: 60upx;
				font-size: 28rpx;
				//font-weight: 500;
				color: #FFFFFF;
			}

			.cancel-pay-submit {
				margin-bottom: 68rpx;
				line-height: 96rpx;
				background: #E1E2E6;
				text-align: center;
        border-radius: 60upx;
				font-size: 28rpx;
				color: #1B1B1B;
			}
		}
	}
</style>